<template>
  <el-container class="orderComment">
    <el-header class="mt20 flex">
      <span class="title fs18 mr10">商品评论列表</span>
      <el-divider />
    </el-header>
    <el-main v-loading="loading">
      <div class="flex">
        <span>商品筛选：</span>
        <el-select v-model="listQuery.goodsId" placeholder="请选择商品" @change="getList">
          <el-option
            v-for="(item, index) in goodsList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <el-table
        :data="tableData"
        class="mt20"
        style="width: 100%"
        border
      >
        <el-table-column label="下单时间" show-overflow-tooltip align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.createTime | setTime }}</template>
        </el-table-column>
        <el-table-column label="订单号" show-overflow-tooltip align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.orderId | isNullData }}</template>
        </el-table-column>
        <el-table-column prop="iconId" label="商品封面" align="center" min-width="10%">
          <template slot-scope="{row}">
            <Cimage :src="row.goods.iconId ? row.goods.iconId[0].url : ''" fit="cover" style="cursor: pointer;border-radius: 5px;" width="60px" height="60px" @click.native="openViewr(row.iconId[0].url)" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" show-overflow-tooltip align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.goods.name | isNullData }}</template>
        </el-table-column>
        <el-table-column label="买家昵称" align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.user.userName || isNullData }}</template>
        </el-table-column>
        <el-table-column label="评分" align="center" min-width="10%">
          <template slot-scope="{row}">
            <el-rate
              v-model="row.count"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            />
          </template>
        </el-table-column>
        <el-table-column label="评价内容" align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.description || isNullData }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="20%">
          <template slot-scope="{row}">
            <el-button size="small" icon="el-icon-search" type="info" @click="toGoodsDetails(row)">商品详情</el-button>
            <el-popover
              v-if="row.reply"
              placement="top"
              width="200"
              trigger="click"
              :content="row.reply.description"
              class="ml10"
            >
              <el-button slot="reference" size="small" type="success" icon="el-icon-view">查看回复</el-button>
            </el-popover>
            <el-popover
              v-else
              placement="top"
              width="400"
              trigger="click"
              class="ml10"
            >
              <el-input v-model="row.replyContent" clearable size="small">
                <el-button slot="append" @click="replyComments(row)">提 交</el-button>
              </el-input>
              <el-button slot="reference" size="small" icon="el-icon-edit" type="primary">回复评价</el-button>
            </el-popover>

          </template>
        </el-table-column>
      </el-table>
      <Cpagination
        :total="listQuery.total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.size"
        position="fixed"
        @pagination="getList"
      />
    </el-main>
    <CImageViewer :viewer-image-url.sync="viewr.viewerImageUrl" :visible.sync="viewr.visible" />
  </el-container>
</template>
<script>
import {
  myGoodsRateGetList,
  myGoodsRateReplyComments
} from '@/api/myGoodsRate'
import {
  myGoodsList
} from '@/api/myGoods'
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      goodsList: [], // 商品数据
      listQuery: {
        page: 1,
        size: 10,
        goodsId: '',
        total: 0
      },
      viewr: { // 图片预览数据
        visible: false,
        viewerImageUrl: []
      }
    }
  },
  created() {
    this.getList()
    this.getGoodsList()
  },
  methods: {
    // 跳转到商品详情
    toGoodsDetails({ goodsId }) {
      this.$router.push({
        name: 'GoodsDetails',
        path: '/goods/details',
        query: { id: goodsId }
      })
    },
    // 回复评价
    async replyComments({ userId, adminId, id, goodsId, replyContent }) {
      const { code, msg } = await myGoodsRateReplyComments({
        parentId: id,
        type: 'admin',
        adminId,
        userId,
        goodsId,
        description: replyContent
      })
      if (code === 0) {
        this.$message.success(msg)
        this.getList()
      }
    },
    // 初始化
    async getList() {
      const { code, data } = await myGoodsRateGetList(this.listQuery)
      if (code === 0) {
        this.loading = false
        this.tableData = data.list.map(item => {
          item['replyContent'] = ''
          return item
        })
        this.listQuery.total = data.total
      }
    },
    // 打开预览大图组件
    openViewr(url) {
      this.viewr.viewerImageUrl = [url]
      this.viewr.visible = true
    },
    // 获取商品列表
    async getGoodsList() {
      const { code, data } = await myGoodsList({
        page: 1,
        size: 999
      })
      if (code === 0) {
        this.goodsList = data.list
      }
    }
  }
}
</script>
